<template>
  <div class="advertother">
    <NavbarIndex />
    <div class="container">
          <article>
            <p class="content" v-html="advert.content"></p>
          </article>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import { formatDate } from '../util/date.js';

export default {
  name: "advertother",
  components: {
    NavbarIndex,
    FooterIndex
  },
  data () {
    return {
      advert: { title: '12345' },
      domain: process.env.VUE_APP_baseURL,
      titlewidth: '100%',
    };
  },
  created () {
    this.getData();
  },
  watch: {
    '$route' (to, form) {
      this.getData();
    }
  },
  methods: {
    //获取详情页内容
    getData () {
      let that = this;
      that.axios
        .post("/content/advert/show", {
          id: that.$route.params.id
        })
        .then(function (ret) {
          ret.data.content = that.replaceStr(ret.data.content)
          that.advert = ret.data
          console.log('advert', ret.data)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //替换详情内容图片url
    replaceStr: function (body) {
      //替换详情内容图片url
      let content = body.replace(
        /(src=)(['"])(.*)(['"])/g,
        '$1$2' + this.domain + '$3$4'
      )
      //替换详情内容图片大小
      content = content.replace(
        /(<img.*style=['"])(.*)(['"])/g,
        '$1 $3'
      )
      return content
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>
<style>
.content img {
  max-width: 100%;
}
.content {
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 400;
}
</style>
